<template>
  <div>
    <!-- 外层容器 -->
    <el-container>
      <!-- 顶栏 -->
      <el-header class="layout-header">
        <div class="welcome">
          <span>欢迎回来，<b>{{loginInfo.username}}</b>！</span>
          <el-dropdown>
            <el-avatar shape="square" size="medium"
                       :src="loginInfo.avatar"></el-avatar>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-document">修改资料</el-dropdown-item>
              <el-dropdown-item icon="el-icon-coordinate">修改头像</el-dropdown-item>
              <el-dropdown-item icon="el-icon-lock">修改密码</el-dropdown-item>
              <el-dropdown-item icon="el-icon-right" divided>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <h1>学茶商城运营管理平台</h1>
      </el-header>
      <!-- 内层容器：下半部分 -->
      <el-container class="layout-body">
        <!-- 左侧边栏 -->
        <el-aside class="layout-aside">
          <el-menu
              router
              default-active="2"
              class="el-menu-vertical-demo"
              background-color="#3a4856"
              text-color="#fff"
              active-text-color="#fff">
            <!-- 主页 -->
            <el-menu-item index="1-3">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>主页</span>
              </template>
            </el-menu-item>
            <!-- 账号管理 -->
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>账号管理</span>
              </template>
              <el-menu-item index="1-1">
                <template slot="title">
                  <i class="el-icon-location"></i>
                  <span>用户管理</span>
                </template>
              </el-menu-item>
              <el-menu-item index="1-2">
                <template slot="title">
                  <i class="el-icon-location"></i>
                  <span>登录日志</span>
                </template>
              </el-menu-item>
            </el-submenu>
            <!-- 测试 -->
            <el-menu-item index="/test">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>测试页面</span>
              </template>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <!-- 主体 -->
        <el-main class="layout-main">
          <!-- 由其它视图组件来显示 -->
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style>
body {
  margin: 0;
}

.layout-header {
  background: #333;
}

.layout-header h1 {
  margin: 0;
  line-height: 60px;
  text-align: left;
  color: #fff;
}

.layout-header .welcome {
  float: right;
  display: flex;
  margin-top: 12px;
}

.layout-header .welcome span {
  line-height: 36px;
  color: #fff;
}

.layout-body {
  position: absolute;
  top: 60px;
  bottom: 0px;
  left: 0px;
  right: 0px;
}

.layout-aside {
  background: #3a4856;
}

.layout-aside .el-menu {
  border: 0;
}

.layout-aside .el-menu i {
  color: #fff;
}

.layout-aside .el-menu-item.is-active {
  background: #405872 !important;
}

.layout-main {
  background: #fff;
}
</style>

<script>
export default {
  data() {
    return {
      loginInfo: {
        username: 'haha',
        avatar: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png'
      },
      xxx: ''
    }
  },
  methods: {
    open() {
      this.$alert('这是一段内容', '标题名称', {
        confirmButtonText: '确定',
        callback: action => {
          this.$message({
            type: 'info',
            message: `action: ${action}`
          });
        }
      });
    }
  },
  created() {
  },
  mounted() {
    let loginInfoJsonString = localStorage.getItem('loginInfo');
    this.loginInfo = JSON.parse(loginInfoJsonString);
  }
}
</script>
